<md-sidenav class="menu md-sidenav-left md-whiteframe-z2" layout="column"
  ng-class="{ 'under-mask': !conversation.isMenuOpen } "
  md-component-id="menu"
  md-is-open="conversation.isMenuOpen"
  md-is-locked-open="$mdMedia('gt-sm')">
  <div flex layout="column" style="overflow:auto;">
    <div class='logo'>LeanMessage</div>
    <md-list flex>
      <md-divider></md-divider>
      <md-subheader class="md-no-sticky">群聊</md-subheader>
      <!-- TODO: 在 SDK 支持后，系统对话应该由 conv.sys 字段来区分 -->
      <md-list-item
        ng-repeat="conv in conversation.conversations | orderBy: '-lastMessageTime'"
        ng-if="(conv.members.length > 2 || !conv.members.length || !conv.members) && conv.id !== conversation.MathBotConversation.id"
        ng-click="conversation.changeTo(conv.id)"
        ng-class="{'active': conv.id === conversation.currentConversation.id}">
        <p layout="row" layout-align="center center">
          {{::conv.name || '广场 ' + conv.id.slice(-4) }}
          <span flex></span>
          <span ng-if="conv.unreadMessagesCount" class="unreadCount">{{conv.unreadMessagesCount}}</span>
        </p>
      </md-list-item>
      <md-divider></md-divider>
      <md-subheader class="md-no-sticky">服务号</md-subheader>
      <!-- TODO: 在 SDK 支持后，系统对话应该由 conv.sys 字段来区分 -->
      <md-list-item
        ng-repeat="conv in conversation.conversations | orderBy: '-lastMessageTime'"
        ng-if="conv.id === conversation.MathBotConversation.id"
        ng-click="conversation.changeTo(conv.id)"
        ng-class="{'active': conv.id === conversation.currentConversation.id}">
        <p layout="row" layout-align="center center">
          {{::conv.name}}
          <span flex></span>
          <span ng-if="conv.unreadMessagesCount" class="unreadCount">{{conv.unreadMessagesCount}}</span>
        </p>
      </md-list-item>
      <md-divider></md-divider>
      <md-subheader class="md-no-sticky">单聊</md-subheader>
      <md-list-item
        ng-repeat="conv in conversation.conversations | orderBy: '-lastMessageTime'"
        ng-if="conv.members.length === 2"
        ng-click="conversation.changeTo('@'+conversation.getSingleConvTarget(conv.members))"
        ng-class="{'active': conv.id === conversation.currentConversation.id}">
        <p layout="row" layout-align="center center">
          {{:: conversation.getSingleConvTarget(conv.members) }}
          <span flex></span>
          <span ng-if="conv.unreadMessagesCount" class="unreadCount">{{conv.unreadMessagesCount}}</span>
        </p>
      </md-list-item>
      <div class="empty-list-hint" layout-padding>点击任意用户 ID 开始单聊</div>
    </md-list>
  </div>
  <md-divider></md-divider>
  <div class="user" layout layout-align="center center" layout-padding>
    <img gravatar-src-once="conversation.userService.user.email" gravatar-size="40">
    <span flex>{{::conversation.userService.user.id}}</span>
    <md-button class="md-icon-button" aria-label="Logout" ng-click="conversation.logout()">
      <md-icon>exit_to_app</md-icon>
    </md-button>
  </div>
</md-sidenav>

<div layout flex ui-view>
</div>
